import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground,
} from 'react-native';
import HTML from 'react-native-render-html';
import {activityDetail} from '../../api/index';
import {HeaderLeft, HeaderRight} from '../../components';

export default class ActivityDetail extends Component {
  static navigationOptions = ({navigation}) => ({
    headerStyle: {
      backgroundColor: '#fff',
      borderBottomWidth: 0,
      height: 44,
      elevation: 0,
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      color: '#333',
      fontSize: 17,
      fontWeight: '400',
    },
    headerLeft: <HeaderLeft triggerBack={() => navigation.goBack()} />,
    headerRight: <HeaderRight />,
    headerBackTitle: null,
  });
  constructor(props) {
    super(props);
    const id = this.props.navigation.getParam('id') || 8;
    this.state = {
      id: id,
    };
  }
  async getDetail() {
    const data = await activityDetail({activityId: this.state.id});
    this.setState({...data.data});
  }
  componentDidMount(): void {
    this.getDetail();
  }

  render() {
    return (
      <ScrollView style={{flex: 1}}>
        <HTML
          html={this.state.content}
          imagesMaxWidth={Dimensions.get('window').width}
        />
      </ScrollView>
    );
  }
}
